<html>

	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style>
			#div1 {
				margin-left: 25%;
			}
			
			#div1 input {
				background: black;
				color: white;
				width: 15%;
				height: 5%;
				line-height: 5%;
				float: left;
				border: solid 0px;
			}
			
			#div1 input.active {
				background: red;
			}
			
			#div1 div:nth-child(1) {
				background: yellow;
			}
			
			#div1 div:nth-child(2) {
				background: palevioletred;
			}
			
			#div1 div:nth-child(3) {
				background: blue;
			}
			
			#div1 div:nth-child(4) {
				background: #FEA424;
			}
			
			#div1 div {
				padding: 10px 10px;
				width: 58.2%;
				height: 30%;
				display: none;
			}
			
			#div1 div p {
				text-align: center;
				color: white;
			}
			
			#div1 div p:nth-child(1) {
				margin-top: 8%;
			}
			
			#div1 div.active {
				display: block;
			}
			
		</style>
	</head>

	<body>
		<div id="div1">
			<div class="active">
				<p>London</p>
				<p>London is the capital city of England.</p>
			</div>
			<div calss="a">
				<p>Paris</p>
				<p>Paris is the capital of France.</p>
			</div>
			<div calss="b">
				<p>Tokyo</p>
				<p>Tokyo is the capital of Japan.</p>
			</div>
			<div calss="c">
				<p>Oslo</p>
				<p>Oslo is the capital of Norway.</p>
			</div>
			<input type="button" value="London" class="active" />
			<input type="button" value="Paris" />
			<input type="button" value="Tokyo" />
			<input type="button" value="Oslo" />
			<script>
				var dom = document.getElementById('div1');
				var btns = dom.getElementsByTagName('input');
				var divs = dom.getElementsByTagName('div');
				for(var i = 0; i < btns.length; i++) {
					btns[i].onclick = function() {
						for(var j = 0; j < btns.length; j++) {
							btns[j].style.background = 'black';
						}
						if(this == btns[0]) {
							this.style.background = 'red';
						} else if(this == btns[1]) {
							this.style.background = 'green';
						} else if(this == btns[2]) {
							this.style.background = 'blue';
						} else if(this == btns[3]) {
							this.style.background = '#FEA424';
							this.style.background = 'orange';
						}
						for(var k = 0; k < divs.length; k++) {
							if(this == btns[k]) {
								divs[k].style.display = 'block';
							} else {
								divs[k].style.display = 'none';
							}
						}
					}
				}
			</script>
		</div>
	</body>

</html>